const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

/*
    将 index.html 放置到 内存中
    创建插件实例
*/ 
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'), // 源文件目录
    filename: 'index.html' // 生成在 内存中的文件 名称 （首页文件）
})

// 向外暴露一个 打包的配置对象： 因为 webpack 是基于 nodejs 构建的项目， 所以使用 nodejs 的 api
/*
'development' ： 开发环境 打包的 js 是未压缩的文件
'production'： 生产环境 打包的 js 是压缩过的文件
*/ 
module.exports = {
    mode: 'development', //'production'
    // 在 webpack 4.x 中， 配置文件约定，默认打包入口文件 在 /src-> index.js 打包好之后 输出的文件 在 dist/目录下 -> mian.js
    plugins: [
        // 放置 插件到 webpack 中
        htmlPlugin
    ],
    module: { // 所有第三方模块的配置
        rules: [ // 模块的配置规则
            {test: /\.js|jsx$/, exclude: '/node_modules/', loader: 'babel-loader'}, // exclude 忽略不受规则影响的文件
            /*
            css-loader?modules 以前设置参数的形式
            下面是 3.0.0 之后的配置方式
            modules: 表示 css 样式的加载规则 以模块的形式加载
            localIdentName： 设置样式模块中 样式 类名或者 ID名
                - [path]  表示样式表 `相对于项目根目录` 所在路径
                - [name]  表示 样式表文件名称
                - [local]  表示样式的类名定义名称
                - [hash:length]  表示32位的hash值
            
            */ 
            {test: /\.css/, loader: 'style-loader'},
            {test: /\.css/,  loader: 'css-loader'},

            // 将自己的样式文件 改为 scss 文件， 第三方 样式文件 使用的是 css 样式 导入的时候 就不会被 模块化导出
            {test: /\.scss/, loader: 'style-loader'},
            {test: /\.scss/,  loader: 'css-loader', options: {
                // 设置 css 样式 一模块方式导出
                modules: {
                    // 设置 模块导出 样式的 类名 或者 ID 名
                    localIdentName: '[path][name]-[local][hash:6]'
                }
            }},
            {test: /\.scss/, loader: 'sass-loader'},


            { test: /\.ttf|woff|woff2|eot|svg$/, loader: 'url-loader'} // 文件 加载规则
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'], // 配置 导入文件是 可以 省略后缀名的文件
        alias: {
            '@': path.join(__dirname, './src') // 用 @ 符号 替代 src 这一层路径
        }
    }
}